<!-- 预约门店列表 -->
<template>
	<view class="order-code">
		<view class="mb10" v-for="(item, key) in goods" :key="key">
			<view class="text-center p10 flex flex-middle flex-center"
				v-if="item.service_status!=3 || item.service_status!=4">
				<view>距到店使用时间，还剩</view>
				<uni-countdown class="red-font" color="#FF4646" :showColon="false" :showSecond="false"
					:day="item.countDay" :hour="item.countHour" :minute="item.countMinute" :second="item.countSecond" />
			</view>
			<view class="card shop"
				@tap="$wanlshop.to(`/pages/service/select_shop_details?id=${item.store.id}&showSwitch=${true}`)">
				<view class="shop-title">服务门店</view>
				<view class="shop-container flex w100P">
					<view class="img">
						<image :src="$wanlshop.oss(item.store.store_avatar, 0, 88)" />
					</view>
					<view class="shop-content flex-1">
						<view class="stop-name w100P flex">
							<view class="flex-1">{{ item.store.store_name }}</view>
							<view style="color: #909399">{{ distance }}</view>
						</view>
						<view class="stop-address">{{ item.store.address }}</view>
						<view class="btn">
							<view class="addr-btn flex flex-middle" @tap.stop="shopMap(item.store)">
								<image style="width: 24rpx;height: 24rpx;margin-right: 6rpx;"
									src="/static/images/service/navigation.png" mode="aspectFit"></image>
								<text>导航</text>
							</view>
							<view class="phone-btn flex flex-middle"
								@tap.stop="$wanlshop.phone(item.store.store_phone)">
								<image style="width: 24rpx;height: 24rpx;margin-right: 6rpx;"
									src="/static/images/service/phone.png" mode="aspectFit"></image>
								<text>电话</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card order-qrcode">
				<view class="tips">请主动告知门店您购买的商品后给码提取</view>
				<!-- <Qrcode v-if="item.service_code" :code="item.service_code"></Qrcode> -->
				<!-- <canvas class='qrcode' :canvas-id="item.service_code" style="width: 200px;height: 200px;">

        </canvas> -->
				<img class="qrcode-img" :src="$wanlshop.oss(item.service_code_url)" alt="" srcset="" mode="widthFix">
				<view class="code">{{ item.service_code }}</view>
				<view class="code-time">有效期至{{ item.service_effective_time }}</view>
				<button v-if="item.service_status==1" class="submit"
					@tap="reservation(item.store.id, item.id)">立即预约</button>
				<button class="submit none" v-if="item.service_status==2">已预约</button>
				<button class="submit none" v-if="item.service_status==3">已使用</button>
				<button class="submit none" v-if="item.service_status==4">已取消</button>
			</view>

		</view>

		<view class="card rules">
			<view class="label-text order-num">
				<view class="label">订单编号：</view>
				<view class="text">
					<text>{{ orderNo }}</text>
					<view class="copy" @tap="copyOrder(orderNo)">复制</view>
				</view>
			</view>
			<view class="label-text">
				<view class="label">订单时间：</view>
				<view class="text">
					<text>{{ paymenttime }}</text>
				</view>
			</view>
			<view class="label-text">
				<view class="label">购买产品：</view>
				<view class="text">
					<text>{{ goods.map(item => item.title).join(',') }}</text>
				</view>
			</view>
			<view class="label-text">
				<view class="label">支付状态：</view>
				<view class="text">
					<text>{{ status }}</text>
				</view>
			</view>
			<view class="label-text" v-if="goods[0].booking_time">
				<view class="label">预约时间：</view>
				<view class="text">
					<text>{{goods[0].booking_time}}</text>
				</view>
			</view>
		</view>


		<view class="footer">
			<button
				v-if="orderData.invoicable == 2 || orderData.state == 3 || orderData.state == 4 || orderData.state == 6">退款</button>
			<button @tap="payMentPost()" v-if="orderData.invoicable==1">申请开票</button>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				interval: 0,
				order: {},
				orderId: '',
				shopId: '',
				// code: '',
				time: '',
				address: '',
				shopName: '',
				mobile: '',
				orderNo: '',
				paymenttime: '',
				// goodsName: '',
				state: '',
				status: '',
				shopImg: '/uploads/20240813/800715de8b79b5b304bd7ed5bb2ea807.png',
				latitude: 22.940324,
				longitude: 113.34878,
				goods: [],
				shop: {},
				distance: '0m'
			};
		},
		onLoad(option) {
			console.log(option)
			this.orderId = option.id

			this.updateCountdown();
			this.interval = setInterval(() => {
				console.log('重新计算')
				this.updateCountdown();
			}, 1000);
		},
		onShow() {
			this.getOrderApi()
		},
		onUnload() {
			clearInterval(this.interval)
		},
		methods: {
			// 获取当前位置
			async getLocation() {
				let res = await this.$wanlshop.location();
				if (res.code === 1) {
					res = res.data;
					// 取出坐标点
					// console.log('res', res)
					let arr = res.address.streetNumber.location.split(',');
					this.longitude = arr[0];
					this.latitude = arr[1];
					// 获取路线规划
					this.getDriverLine();
				}
			},
			// 路线规划，调用高德地图的api实现规划路线的功能。
			getDriverLine() {
				const that = this;
				//这个key是在高德导航app上申请的web路线规划
				const key = this.$wanlshop.config('amapkey');
				//起点坐标
				const origin = [this.longitude, this.latitude].join(',');
				//终点坐标
				const destination = [this.goods[0].store.longitude, this.goods[0].store.latitude].join(',');
				// 驾车选择策略 - 距离优先
				const strategy = 2;
				//给起点坐标一个图标
				// this.startingPoint()
				//给终点坐标一个图标
				// this.endPoint()
				uni.request({
					url: `https://restapi.amap.com/v3/direction/driving?origin=${origin}&destination=${destination}&strategy=${strategy}&key=${key}`,
					success: (res) => {
						console.log('路线规划', res);
						const data = res.data.route;

						if (data.paths && data.paths[0] && data.paths[0].steps) {
							that.distance = that.$wanlshop.setMorKm(data.paths[0].distance);
						}
					},
					fail: function(res) {
						console.log("获取路线失败", res);
					},
				});
			},
			updateCountdown() {
				if (this.goods.length) {
					this.goods.forEach((item, index) => {
						const now = new Date().getTime();
						const diff = new Date(item.service_effective_time) - now;
						if (diff <= 0) {
							this.$set(this.goods[index], 'countDay', 0)
							this.$set(this.goods[index], 'countHour', 0)
							this.$set(this.goods[index], 'countMinute', 0)
							this.$set(this.goods[index], 'countSecond', 0)
							return;
						}
						const day = Math.floor(diff / (1000 * 60 * 60 * 24));
						const hour = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
						const minute = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
						const second = Math.floor((diff % (1000 * 60)) / 1000);
						this.$set(this.goods[index], 'countDay', day)
						this.$set(this.goods[index], 'countHour', hour)
						this.$set(this.goods[index], 'countMinute', minute)
						this.$set(this.goods[index], 'countSecond', second)
					})
				}
			},
			payMentPost() {
				let info = {
					order_no: this.order.order_no,
					order_id: this.order.orderId,
					shop_id: this.order.shop_id,
					price: this.order.pay.price,
				};
				console.log(info);

				uni.setStorage({
					key: "order_info",
					data: JSON.stringify(info),
					success: function() {
						console.log("存储成功");
					},
				});
				this.$wanlshop.to(`/pages/invoice/list`);
			},
			// 复制
			copyOrder(data) {
				uni.setClipboardData({
					data: data,
					showToast: false,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						})
					}
				})
			},
			shopMap(store) {
				let {
					address,
					store_name,
					latitude,
					longitude
				} = store
				let data = {
					name: store_name,
					addr: address,
					latitude: latitude,
					longitude: longitude
				}
				let str = Object.keys(data).map(key => {
					return `${key}=${data[key]}`
				}).join('&')
				this.$wanlshop.to(`/pages/service/select_shop_map?${str}`)
			},
			// 获取订单
			async getOrderApi() {
				let res = await this.$api.get({
					url: "/wanlshop/order/getOrderInfo",
					data: {
						id: this.orderId,
					}
				})

				this.goods = res.goods

				// this.effectiveTime = res.goods[0]?.service_effective_time
				// this.code = res.goods[0]?.service_code || ''
				// this.goodsName = res.goods[0]?.title || ''
				// this.orderGoodsId = res.goods[0].id

				this.order = res

				this.address = res.address.address || ''
				this.shopName = res.shop.shopname || ""
				this.mobile = res.address.mobile || ''
				// this.time = this.timeFormat(res.time||'')
				console.log(res)
				this.orderNo = res.order_no || ''

				this.paymenttime = res.paymenttime_text

				this.state = res.state
				this.status = res.logistics.status

				// 生成二维码
				// this.goods.forEach(item => {
				//   uQRCode.make({
				//     canvasId: item.service_code,
				//     text: item.service_code,
				//     size: 200,
				//   });
				// });

				this.getLocation()
			},
			// 获取门店列表 以及第一个列表
			// 加载门店列表
			getStoreListApi(longitude = '', latitude = '') {
				return this.$api.post({
					url: "/wanlshop/store/list",
					method: "post",
					longitude,
					latitude,
					sort: 4, //离得最近
				}).then((res) => {
					console.log(res);
				});
			},

		},
	};
</script>

<style scoped lang="scss">
	.order-code {
		min-height: 100vh;
		background: $page-color-base;
		padding: 0 15rpx 120rpx 15rpx;

		.card {
			background: #fff;
			border-radius: 10rpx;
			padding: 25rpx 15rpx 40rpx;
			margin-bottom: 20rpx;
		}

		.shop {
			.shop-title {
				font-size: 26rpx;
				margin-bottom: 15rpx;
			}

			.shop-container {
				display: flex;
				align-items: center;
				height: auto;

				.img {
					width: 140rpx;
					height: 140rpx;
					border-radius: 12rpx;
					overflow: hidden;
					margin-right: 20rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-content {
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.stop-name {
						font-size: 26rpx;
						color: #000;
						margin-bottom: 10rpx;
					}

					.stop-address {
						font-size: 24rpx;
						color: $font-color-light;
						margin-bottom: 20rpx;
						flex: 1;
					}

					.btn {
						display: flex;
						align-items: center;

						.phone-btn,
						.addr-btn {
							font-size: 24rpx;
							padding: 6rpx 10rpx;
							border: 1rpx solid #512D0D;
							border-radius: 10rpx;
							margin-right: 10rpx;
							color: #512D0D;
						}
					}
				}
			}
		}

		.order-qrcode {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			.tips {
				font-size: 24rpx;
				color: rgba(red, 0.8);
				margin-bottom: 20rpx;
			}

			.qrcode-img {
				width: 300rpx;
				height: 300rpx;
				margin-bottom: 20rpx;
			}

			.code {
				font-weight: 600;
				font-size: 48rpx;
				color: #000;
				margin-bottom: 15rpx;
			}

			.code-time {
				font-size: 24rpx;
				color: #ccc;
				margin-bottom: 25rpx;
			}

			.submit {
				font-size: 28rpx;
				background-color: $theme;
				height: 80rpx;
				border-radius: 80rpx;
				line-height: 80rpx;
				width: 100%;
				text-align: center;
				color: #fff;

				&.none {
					background: #ccc;
				}
			}
		}

		.rules {
			.label-text {
				display: flex;

				&.order-num {
					align-items: center;

					.text {
						align-items: center;
						display: flex;

						.copy {
							margin-left: 20rpx;
							font-size: 18rpx;
							background: rgba(#999, 0.5);
							padding: 3rpx 8rpx;
							border-radius: 5rpx;
							color: #333;
						}
					}
				}

				.label,
				text {
					line-height: 40rpx;
					color: #000;
					font-size: 24rpx;
				}

			}
		}

		.footer {
			display: flex;
			justify-content: flex-end;
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			background: #fff;
			padding: 20rpx 0;

			button {
				margin: 0;
				margin-right: 20rpx;
				padding: 0 20rpx;
				border-radius: 80rpx;
				height: 80rpx;
				line-height: 80rpx;
				border: 1px solid orange;
				color: orange;

				&:nth-child(2) {
					background: orange;
					color: #fff;
				}
			}
		}
	}
</style>